<template>
    <div class="delivery-address-box">
        <h5 class="bigtitle" v-t="'goods.text21'">Receiving Address</h5>
        <template v-if="addressList && addressList.length>0">
            <div class="dy-total">
                <label><em>{{addressList.length}}</em> {{text22}}</label> 
                <div class="dy-btn" v-if="adminAddress">
                    <my-button class="adminBtn" :text="text25" :styleType='2' @click="doAdmin"/>
                </div>
                <div class="dy-btn" v-else>
                    <my-button class="adminBtn" :text="text24" :styleType='2' @click="doAdmin"/>
                </div>
                
            </div>
            <ul class="dy-address-list">
                <van-checkbox-group v-model="adcks" ref="checkboxGroup">
                    <li v-for="dt in addressList" :key="dt.userShippingAddressId" @click="setSelect(dt)">
                        <div class="cbkBox" v-if="!adminAddress">
                            <my-checkbox :name="dt.userShippingAddressId"/>
                        </div>
                        <div class="addressDt">
                            <div class="name">{{dt.name}} {{dt.phone}}</div>
                            <p>{{dt.address}},{{dt.cityName}},{{dt.countryName}}</p>
                        </div>
                        <div class="del" v-if="adminAddress" @click="del(dt.userShippingAddressId)">
                            <i class="iconfont icon-shanchu"></i>
                        </div>
                    </li>  
                </van-checkbox-group>
            </ul>
            <div class="addBtnBox">
                <my-button :text='text23'  @click="showFlag=true"/>
            </div>
        </template>
        <template v-else>
            <div class="bigAddBox">
                <span @click="showFlag=true">
                    <i class="iconfont icon-jia"></i>
                   {{text23}}
                </span>
            </div>
        </template>
        <my-dailog v-model:show="showFlag" :showtopclose="true" :styleType="3">
            <template v-slot:header>
                <div class="addaddressTitle">{{text23}}</div>
            </template>
            <add-address @close="showFlag=false"/>
        </my-dailog>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,computed,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import myButton from '@/components/myButton.vue'
import myCheckbox from '@/components/myCheckbox.vue'
import myDailog from '@/components/myDailog.vue'
import addAddress from './addAddress.vue'
import { myJsDailog ,toast} from '@/utils/common'
import { useI18n } from 'vue-i18n'

export default {
    components:{
       myButton,
       myCheckbox,
       myDailog,
       addAddress
    },
    props:{

    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            adcks:[],
            addressList:computed(()=>store.state.shop.addressList), // 收货地址列表
            adminAddress:computed(()=>store.state.shop.adminAddress),// 管理状态
            curAddress:computed(()=>store.state.shop.curAddress), // 当前当前选择的地址
            showFlag:false,
            text22:t('goods.text22'),
            text23:t('goods.text23'),
            text24:t('goods.text24'),
            text25:t('goods.text25'),
            
        })

        onMounted(()=>{
            // 获取收货地址
            getAddressList()
        })

        const getAddressList = ()=>{
            store.dispatch('shop/get_address_list',{
                walletAddress:state.userInfo.walletAddress,
            })
        }

        const doAdmin = ()=>{
            store.commit('shop/set_adminAddress',!state.adminAddress)
        }

        const del =(userShippingAddressId)=>{
            myJsDailog({
                message:t('goods.text26') //'Please Confirm Whether To Delete The Receipt Information'
            },async ()=>{
                const res = await store.dispatch('shop/del_address',userShippingAddressId)
                if(res.success){
                    toast('Delete Succeeded')
                    getAddressList()
                }else{
                    toast('Delete Failed')
                }
            })
            //
        }
        const setSelect = (item)=>{
            state.adcks = [item.userShippingAddressId]
            store.commit('shop/set_curAddress',item)
            store.dispatch('shop/get_freight_price')  // 获取物流费用
        }

        return{
            ...toRefs(state),
            doAdmin,
            del,
            setSelect
        }
    }
}
</script>

<style lang="scss" scoped>
    .delivery-address-box{
        display: flex;
        flex-flow: column;
        height: 100%;
        width: 100%;
        overflow: hidden;
        .bigtitle{
            line-height: normal;
            font-size: 28px;
            font-family: Inter-Medium, Inter;
            font-weight: 500;
            color: #FFFFFF;
            line-height: normal;
            text-shadow: 0px 0px 4px #07A3FB;
            //-webkit-background-clip: text;
            //-webkit-text-fill-color: transparent;
        }
        .dy-total{
            display: flex;
            align-items: center;
            height:70px;
            label{
                font-family: Poppins-Medium, Poppins;
                font-weight: 500;
                color: #fff;
                font-size: 28px;
                flex: 1;
                em{
                    font-weight: 800px;
                    color: #73ECFF;
                    font-style: normal;

                }
            }
            .dy-btn{
                display: inline-block;
                height: 50px;
                
                .adminBtn{
                    padding: 0 30px;
                    height: 100%;
                    line-height: 50px;
                }
            }
        }
        .dy-address-list{
            padding:0;
            margin: 0;
            list-style: none;
            flex: 1;
            height: 100%;
            overflow: hidden;
            overflow-y: auto;
            font-family: Poppins-Medium, Poppins;
            font-weight: 500;
            color: #FFFFFF;
            font-size: 22px;
            li{
                display: flex;
                width: 100%;
                padding: 18px 0;
                border-bottom: 1px dashed #8597C1;
                align-items: center;
                .addressDt{
                    flex: 1;
                    font-size: 22px;
                    color: #C9E5FF;
                    line-height: 30px;
                    font-weight: 500;
                    flex-shrink: 0;
                    .name{
                        font-size: 24px;
                        color: #fff;
                        font-weight: 500;
                        padding: 0 0 10px 0;
                    }
                }
                .del{
                    flex-shrink: 0;
                    display: flex;
                    align-items: center;
                    padding: 0 0 0 15px;
                }
            }
        }
        .addBtnBox{
            height: 70px;
            padding: 10px 70px 0 70px;
            .myBtn{
                height: 100%;
                line-height: 60px;
            }
        }
        .bigAddBox{
            width: 100%;
            height: 100%;
            padding: 30px 0 20px 0;
            span{
                display: flex;
                width: 100%;
                height: 100%;
                flex-flow: column;
                align-items: center;
                justify-content: center;
                background: rgba(103,248,255,0.2000);
                border: 1px solid rgba(103,248,255,0.5000);
                font-size: 30px;
                color: #fff;
                font-family: Inter-Medium, Inter;
                font-weight: 500;
                i{
                    font-size: 40px;
                    color: #6CF4FF;
                }
            }
        }
        
    }
    .addaddressTitle{
        font-size: 30px;
        color: #dddfe1;
        padding: 10px 0 0 30px;
    }
    
</style>